<template>
	<view class="shop" @tap="godetails">
		<view class="shop1">
			<view class="image">
			<image :src="list.img" mode=""></image>
		</view>
		 <view class="text">
		 	<text>{{list.name}}</text>
		 </view>
		 <view class="text1">
		 	{{list.value}}
		 </view>
		 <view class="bun">
			 
		 	<view><image src="../../static/home/积分 (1).png" mode=""></image><text>{{list.num}}环保值</text></view>
			<view class="but">
				兑换
			</view>
		 </view>
		</view>
		
	</view>
</template>

<script>
	export default {
		name:"shop-list",
		props:{
			list:{
				type:Object,
				default:{}
			}
		},
		data() {
			return {
				
			};
		},
		methods:{
			godetails(){
				uni.navigateTo({
					url:"/pages/details/details?data="+JSON.stringify(this.list) 
				})
			}
		}
	}
</script>

<style lang="less" scoped>
.shop{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 340rpx;
	height: 400rpx;
	background-color: #fff;
	margin-bottom: 20rpx;
	border-radius: 15rpx;
}
.shop1{
	width: 300rpx;
	height: 360rpx;
	// background-color: aqua;
}
.image{
	display: flex;
	align-items: center;
	justify-content: center;
	height: 210rpx;
	width: 100%;
	image{
	width: 90rpx;
	height: 200rpx;	
	}
}
.text{
	width: 100%;
	height: 30rpx;
	text{
		font-size: 30rpx;
		color: #4a4a4a;
		font-weight: 400;
	}
}
.text1{
	margin-top:30rpx;
	width: 240rpx;
	height: 25rpx;
	font-size: 20rpx;
	white-space: nowrap; 
	overflow: hidden;
	text-overflow: ellipsis;
    color: #bababa;
}
.bun{
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 46rpx;
	width: 100%;
	margin-top: 25rpx;
	
	view{
	display: flex;
	justify-content: center;
	align-items: center;
	
	image{
	width: 22rpx;
	height: 26rpx;
	padding-right: 10rpx;
	}
	text{
		font-size: 30rpx;
		color: #00c783;
	}
	}
	.but{
		border-radius: 25rpx;
		font-size: 30rpx;
		width: 96rpx;
		height: 42rpx;
		background-color:#00c783;
		color: #fff;
	}
}
</style>